<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>运动会赛事网</title>
    <!-- load stylesheets -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400">
    <!-- Google web font "Open Sans" -->
    <link rel="stylesheet" href="__ROOT__/static/index/font-awesome-4.5.0/css/font-awesome.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="__ROOT__/static/index/css/bootstrap.min.css">
    <!-- Bootstrap style -->
    <link rel="stylesheet" href="__ROOT__/static/index/css/hero-slider-style.css">
    <!-- Hero slider style (https://codyhouse.co/gem/hero-slider/) -->
    <link rel="stylesheet" href="__ROOT__/static/index/css/magnific-popup.css">
    <!-- Magnific popup style (http://dimsemenov.com/plugins/magnific-popup/) -->
    <link rel="stylesheet" href="__ROOT__/static/index/css/templatemo-style.css">
    <!-- Templatemo style -->

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <![endif]-->
</head>

<body>

<!-- Content -->
<div class="cd-hero">

    <!-- Navigation -->
    <div class="cd-slider-nav">v
        <nav class="navbar">
            <div class="tm-navbar-bg">

                <a class="navbar-brand text-uppercase" href="#"><i class="fa fa-flash tm-brand-icon"></i>运动会</a>

                <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#tmNavbar">
                    &#9776;
                </button>
                <div class="collapse navbar-toggleable-md text-xs-center text-uppercase tm-navbar" id="tmNavbar">
                    <ul class="nav navbar-nav">
                        <li class="nav-item active selected">
                            <a class="nav-link" href="#0" data-no="1">首页 <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#0" data-no="2">赛事项目</a>
                        </li>
                        <li class="nav-item" >
                            <a class="nav-link" href="#0" data-no="3">项目成绩榜</a>
                        </li>
                        <li class="nav-item" style="display: none;" >
                            <a class="nav-link" href="#0" data-no="4">66</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#0" data-no="5">团体总分榜</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#0" data-no="6">报名</a>
                        </li>
                    </ul>
                </div>
            </div>

        </nav>
    </div>

    <ul class="cd-hero-slider">

        <!-- Page 1 Home -->
        <li class="selected">
            <div class="cd-full-width">
                <div class="container-fluid js-tm-page-content tm-page-pad" data-page-no="1">
                    <div class="row">
                        <div class="tm-3-col-container">

                            {volist name="newsList" id="vo"}
                                 <a href="{:url('Index/newsDetail',['id'=>$vo.id])}" class="detail">
                                    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 tm-3-col-textbox">
                                        <div class="text-xs-left tm-textbox tm-textbox-padding tm-bg-white-translucent tm-3-col-textbox-inner">
                                            <!--<i class="fa fa-4x fa-pagelines tm-home-fa"></i>-->
                                            <h2 class="tm-text-title">{$vo.news_title}</h2>
                                            <p class="tm-text">{$vo.news_con}</p>
                                        </div>
                                    </div>
                                 </a>
                            {/volist}

                        </div>
                    </div>
                </div>
            </div>
        </li>
        <link rel="stylesheet" href="__ROOT__/static/admin/lib/layui/css/layui.css">
        <script type="text/javascript" src="__ROOT__/static/admin/lib/layui/layui.js"></script>
        <script>
            layui.use('layer', function(){
                var layer = layui.layer;
                $(".detail").click(function(){
                    var href=$(this).attr("href");
                    layer.open({
                        type: 2,
                        area:['50%', '80%'],
                        title:"新闻详情",
                        content: href
                    });
                    return false;
                })
            });
        </script>
        <!-- Page 2 Gallery One -->
        <li>
            <div class="cd-full-width">
                <div class="container-fluid js-tm-page-content" data-page-no="2" data-page-type="gallery">
                    <div class="tm-img-gallery-container">
                        <div class="tm-img-gallery gallery-one" style="margin-top: 50px;">
                            <!-- Gallery One pop up connected with JS code below -->
                            <div class="tm-img-gallery-info-container">
                                <h2 class="tm-text-title tm-gallery-title tm-white"><span class="tm-white">团结、友谊、进步；更高、更快、更强！</span></h2>
                                <p class="tm-text">
                                    Unity, friendship and progress;Higher, faster, stronger!
                                </p>
                            </div>

                            {volist name="kindList" id="kindList"}
                                <div class="grid-item">
                                    <figure class="effect-ruby" style="width: 260px;height: 340px;">
                                        <img src="{:getimg($kindList.kind_img)}" alt="Image" class="img-fluid tm-img" style="width: 260px;height: 340px;">
                                        <figcaption>
                                            <h2 class="tm-figure-title">{$kindList.kind_name}</h2>
                                            <p class="tm-figure-description">
                                               初赛时间：{$kindList.kind_timeone}
                                                <br>
                                                初赛地点：{$kindList.kind_locone}
                                                <br>
                                                决赛时间：{$kindList.kind_timetwo}
                                                <br>
                                                决赛地点：{$kindList.kind_loctwo}
                                            </p>
                                            <!--<a href="__ROOT__/static/index/img/tm-img-01.jpg">View more</a>-->
                                        </figcaption>
                                    </figure>
                                </div>
                            {/volist}

                        </div>
                    </div>
                </div>
            </div>
        </li>

        <!-- Page 3 Gallery Two -->
        <li>
            <div class="cd-full-width">
                <div class="container-fluid js-tm-page-content" data-page-no="3" data-page-type="gallery">
                    <div class="tm-img-gallery-container tm-img-gallery-container-2">
                        <div class="tm-img-gallery gallery-two"  style="margin-top: 50px;">
                            <!-- Gallery Two pop up connected with JS code below -->
                            <div class="tm-img-gallery-info-container">
                                <h2 class="tm-text-title tm-gallery-title"><span class="tm-white">与时俱进，开拓创新，顽强拼搏，勇夺第一。</span></h2>
                                <p class="tm-text"><span class="tm-white">
                                    Keep pace with The Times, blaze new trails, fight hard and win the first place.
                                </span>
                                </p>
                            </div>

                                <div class="row">
                                    <div class="tm-3-col-container">
                                        {volist name="kindList3" id="kindList3"}
                                            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 tm-3-col-textbox" style="margin-bottom: 10px;">
                                                <div class="text-xs-left tm-textbox tm-textbox-padding tm-bg-white-translucent tm-3-col-textbox-inner">
                                                    <!--<i class="fa fa-4x fa-pagelines tm-home-fa"></i>-->
                                                    <h2 class="tm-text-title">{$kindList3.kind_name}</h2>
                                                    {volist name=":kindUser($kindList3['id'])" id="user"}
                                                    <p class="tm-text">
                                                        姓名：{$user.user_name}
                                                        <br>
                                                        <span style="color: red;">
                                                    初赛成绩：{$user.user_secoreone}
                                                    <br>
                                                    决赛成绩：{$user.user_secore}
                                                </span>
                                                    </p>
                                                    {/volist}
                                                </div>
                                            </div>
                                        {/volist}
                                    </div>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>

        <!-- Page 4 Gallery Three -->
        <li>
            <div class="cd-full-width">
                <div class="container-fluid js-tm-page-content" data-page-no="4" data-page-type="gallery">
                    <div class="tm-img-gallery-container tm-img-gallery-container-3">
                        <div class="tm-img-gallery gallery-three">
                            <!-- Gallery Two pop up connected with JS code below -->

                            <div class="tm-img-gallery-info-container">
                                <h2 class="tm-text-title tm-gallery-title"><span class="tm-white">Third Image Grid</span></h2>
                                <p class="tm-text"><span class="tm-white">Nulla efficitur, ligula et imperdiet volutpat, lacus tortor tempus massa, eget tempus quam nibh vel nulla. Maecenas purus sem, lobortis id odio in, ultrices scelerisque sapien.</span>
                                </p>
                            </div>
                            <div class="grid-item">
                                <figure class="effect-ruby">
                                    <img src="__ROOT__/static/index/img/tm-img-11-tn.jpg" alt="Image" class="img-fluid tm-img">
                                    <figcaption>
                                        <h2 class="tm-figure-title">Picture <span>One</span></h2>
                                        <p class="tm-figure-description">Suspendisse id placerat risus. Mauris quis luctus risus.</p>
                                        <a href="__ROOT__/static/index/img/tm-img-11.jpg">View more</a>
                                    </figcaption>
                                </figure>
                            </div>
                            <div class="grid-item">
                                <figure class="effect-ruby">
                                    <img src="__ROOT__/static/index/img/tm-img-12-tn.jpg" alt="Image" class="img-fluid tm-img">
                                    <figcaption>
                                        <h2 class="tm-figure-title">Picture <span>Two</span></h2>
                                        <p class="tm-figure-description">Maecenas purus sem, lobortis id odio in sapien.</p>
                                        <a href="__ROOT__/static/index/img/tm-img-12.jpg">View more</a>
                                    </figcaption>
                                </figure>
                            </div>
                            <div class="grid-item">
                                <figure class="effect-ruby">
                                    <img src="__ROOT__/static/index/img/tm-img-13-tn.jpg" alt="Image" class="img-fluid tm-img">
                                    <figcaption>
                                        <h2 class="tm-figure-title">Picture <span>Three</span></h2>
                                        <p class="tm-figure-description">Suspendisse id placerat risus. Mauris quis luctus risus.</p>
                                        <a href="__ROOT__/static/index/img/tm-img-13.jpg">View more</a>
                                    </figcaption>
                                </figure>
                            </div>
                            <div class="grid-item">
                                <figure class="effect-ruby">
                                    <img src="__ROOT__/static/index/img/tm-img-14-tn.jpg" alt="Image" class="img-fluid tm-img">
                                    <figcaption>
                                        <h2 class="tm-figure-title">Picture <span>Four</span></h2>
                                        <p class="tm-figure-description">Maecenas purus sem, lobortis id odio in sapien.</p>
                                        <a href="img/tm-img-14.jpg">View more</a>
                                    </figcaption>
                                </figure>
                            </div>
                            <div class="grid-item">
                                <figure class="effect-ruby">
                                    <img src="__ROOT__/static/index/img/tm-img-15-tn.jpg" alt="Image" class="img-fluid tm-img">
                                    <figcaption>
                                        <h2 class="tm-figure-title">Picture <span>Five</span></h2>
                                        <p class="tm-figure-description">Suspendisse id placerat risus. Mauris quis luctus risus.</p>
                                        <a href="__ROOT__/static/index/img/tm-img-15.jpg">View more</a>
                                    </figcaption>
                                </figure>
                            </div>
                            <div class="grid-item">
                                <figure class="effect-ruby">
                                    <img src="__ROOT__/static/index/img/tm-img-16-tn.jpg" alt="Image" class="img-fluid tm-img">
                                    <figcaption>
                                        <h2 class="tm-figure-title">Picture <span>Six</span></h2>
                                        <p class="tm-figure-description">Maecenas purus sem, lobortis id odio in sapien.</p>
                                        <a href="__ROOT__/static/index/img/tm-img-16.jpg">View more</a>
                                    </figcaption>
                                </figure>
                            </div>
                        </div>
                    </div> <!-- .tm-img-gallery-container -->
                </div>
            </div>
        </li>
        <div class="copyrights">Collect from <a href="#" ></a></div>

        <!-- Page 5 About -->
        <li>
            <div class="cd-full-width">
                <div class="container-fluid js-tm-page-content tm-page-width" data-page-no="5">
                    {volist name="stuList2" id="stuList2"}
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="tm-flex" style="height:50px;background-color: white;margin: 10px 0px 10px 0px;">
                                    <h2 class="tm-text-title">{$stuList2.stu_class}
                                        <span style="float: right;margin-right: 40px;">团体总分： {:sumScore($stuList2.id)}</span></h2>
                            </div>
                        </div>
                    </div>
                    {/volist}

                <!--<div class="row">-->
                    <!--<div class="col-xs-12">-->
                        <!--<div class="tm-flex">-->
                            <!--{volist name="kindList3" id="kindList3"}-->
                            <!--<div class="tm-bg-white-translucent  tm-textbox tm-2-col-textbox-2 tm-textbox-padding">-->
                                <!--<h2 class="tm-text-title">{$kindList3.kind_name}</h2>-->
                                    <!--{volist name=":kindUser($kindList3['id'])" id="user"}-->
                                            <!--<p class="tm-text">-->
                                                <!--姓名：{$user.user_name}-->
                                                <!--<br>-->
                                                <!--<span style="color: red;">-->
                                                    <!--初赛成绩：{$user.user_secoreone}-->
                                                    <!--<br>-->
                                                    <!--决赛成绩：{$user.user_secore}-->
                                                <!--</span>-->
                                            <!--</p>-->
                                    <!--{/volist}-->
                            <!--</div>-->
                           <!--{/volist}-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
                </div>
            </div> <!-- .cd-full-width -->

        </li>



        <!-- Page 6 Contact Us -->
        <li>
            <div class="cd-full-width">
                <div class="container-fluid js-tm-page-content tm-page-pad" data-page-no="6">
                    <div class="tm-contact-page">
                        <div class="row">
                            <div class="col-xs-12">
                                <div class="tm-flex tm-contact-container">
                                    <div class="tm-bg-white-translucent text-xs-left tm-textbox tm-2-col-textbox-2 tm-textbox-padding tm-textbox-padding-contact">
                                        <h2 class="tm-contact-info">运动会比赛报名</h2>
                                        <p class="tm-text">友谊第一，比赛第二！</p>

                                        <!-- contact form -->
                                        <form action="{:url('Index/userSave')}" method="post" class="tm-contact-form">

                                            <div class="form-group">
                                                <input type="text" id="contact_name" name="user_name" class="form-control" placeholder="姓名"  required/>
                                            </div>

                                            <div class="form-group">
                                                <input type="text" id="contact_email" name="user_tel" class="form-control" placeholder="电话"  required/>
                                            </div>

                                            <div class="form-group">
                                                <select name="user_class" class="form-control" >
                                                    {volist name="stuList" id="stuList" }
                                                        <option value="{$stuList.id}">{$stuList.stu_class}</option>
                                                    {/volist}
                                                </select>
                                                <!--<input type="email" name="user_class" class="form-control" placeholder="班级"  required/>-->
                                            </div>

                                            <div class="form-group">
                                                <select name="user_kind" class="form-control" >
                                                    {volist name="kindList2" id="kindList2" }
                                                        <option value="{$kindList2.id}">{$kindList2.kind_name}</option>
                                                    {/volist}
                                                </select>
                                                <!--<input type="email" name="user_class" class="form-control" placeholder="班级"  required/>-->
                                            </div>

                                            <!--<div class="form-group">-->
                                                <!--<textarea id="contact_message" name="contact_message" class="form-control" rows="5" placeholder="Your message" required></textarea>-->
                                            <!--</div>-->

                                            <button type="submit" class="pull-xs-right tm-submit-btn">报名</button>

                                        </form>
                                    </div>

                                    <!--<div class="tm-bg-white-translucent text-xs-left tm-textbox tm-2-col-textbox-2 tm-textbox-padding tm-textbox-padding-contact">-->
                                        <!--<h2 class="tm-contact-info">123 New Street 11000, San Francisco, CA</h2>-->
                                        <!--&lt;!&ndash; google map goes here &ndash;&gt;-->
                                        <!--<div id="">map</div>-->
                                    <!--</div>-->

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div> <!-- .cd-full-width -->
        </li>
    </ul> <!-- .cd-hero-slider -->

    <footer class="tm-footer">

        <div class="tm-social-icons-container text-xs-center">
            <!--<a href="#" class="tm-social-link"><i class="fa fa-facebook"></i></a>-->
            <!--<a href="#" class="tm-social-link"><i class="fa fa-google-plus"></i></a>-->
            <!--<a href="#" class="tm-social-link"><i class="fa fa-twitter"></i></a>-->
            <!--<a href="#" class="tm-social-link"><i class="fa fa-behance"></i></a>-->
            <!--<a href="#" class="tm-social-link"><i class="fa fa-linkedin"></i></a>-->
        </div>

    </footer>

</div> <!-- .cd-hero -->


<!-- Preloader, https://ihatetomatoes.net/create-custom-preloading-screen/ -->
<div id="loader-wrapper">

    <div id="loader"></div>
    <div class="loader-section section-left"></div>
    <div class="loader-section section-right"></div>

</div>

<!-- load JS files -->
<script src="__ROOT__/static/index/js/jquery-1.11.3.min.js"></script>         <!-- jQuery (https://jquery.com/download/) -->
<script src="__ROOT__/static/index/js/tether.min.js"></script> <!-- Tether for Bootstrap (http://stackoverflow.com/questions/34567939/how-to-fix-the-error-error-bootstrap-tooltips-require-tether-http-github-h) -->
<script src="__ROOT__/static/index/js/bootstrap.min.js"></script>             <!-- Bootstrap js (v4-alpha.getbootstrap.com/) -->
<script src="__ROOT__/static/index/js/hero-slider-main.js"></script>          <!-- Hero slider (https://codyhouse.co/gem/hero-slider/) -->
<script src="__ROOT__/static/index/js/jquery.magnific-popup.min.js"></script> <!-- Magnific popup (http://dimsemenov.com/plugins/magnific-popup/) -->

<script>

    function adjustHeightOfPage(pageNo) {

        var offset = 80;
        var pageContentHeight = 0;

        var pageType = $('div[data-page-no="' + pageNo + '"]').data("page-type");

        if( pageType != undefined && pageType == "gallery") {
            pageContentHeight = $(".cd-hero-slider li:nth-of-type(" + pageNo + ") .tm-img-gallery-container").height();
        }
        else {
            pageContentHeight = $(".cd-hero-slider li:nth-of-type(" + pageNo + ") .js-tm-page-content").height();
        }

        if($(window).width() >= 992) { offset = 120; }
        else if($(window).width() < 480) { offset = 40; }

        // Get the page height
        var totalPageHeight = 15 + $('.cd-slider-nav').height()
            + pageContentHeight + offset
            + $('.tm-footer').height();

        // Adjust layout based on page height and window height
        if(totalPageHeight > $(window).height())
        {
            $('.cd-hero-slider').addClass('small-screen');
            $('.cd-hero-slider li:nth-of-type(' + pageNo + ')').css("min-height", totalPageHeight + "px");
        }
        else
        {
            $('.cd-hero-slider').removeClass('small-screen');
            $('.cd-hero-slider li:nth-of-type(' + pageNo + ')').css("min-height", "100%");
        }
    }

    /*
        Everything is loaded including images.
    */
    $(window).load(function(){

        adjustHeightOfPage(1); // Adjust page height

        /* Gallery One pop up
        -----------------------------------------*/
        $('.gallery-one').magnificPopup({
            delegate: 'a', // child items selector, by clicking on it popup will open
            type: 'image',
            gallery:{enabled:true}
        });

        /* Gallery Two pop up
        -----------------------------------------*/
        $('.gallery-two').magnificPopup({
            delegate: 'a',
            type: 'image',
            gallery:{enabled:true}
        });

        /* Gallery Three pop up
        -----------------------------------------*/
        $('.gallery-three').magnificPopup({
            delegate: 'a',
            type: 'image',
            gallery:{enabled:true}
        });

        /* Collapse menu after click
        -----------------------------------------*/
        $('#tmNavbar a').click(function(){
            $('#tmNavbar').collapse('hide');

            adjustHeightOfPage($(this).data("no")); // Adjust page height
        });

        /* Browser resized
        -----------------------------------------*/
        $( window ).resize(function() {
            var currentPageNo = $(".cd-hero-slider li.selected .js-tm-page-content").data("page-no");

            // wait 3 seconds
            setTimeout(function() {
                adjustHeightOfPage( currentPageNo );
            }, 1000);

        });

        // Remove preloader (https://ihatetomatoes.net/create-custom-preloading-screen/)
        $('body').addClass('loaded');

    });



</script>

</body>
</html>